<template>
    <div
        class="postQa"
        @scroll="postQaScroll($event)"
    >
        <div
            class="postQa-form"
            ref="postQaForm"
        >

            <div class="postQa-form-title">
                <div class="postQa-form-title-img">
                    <img src="../../assets/image/qa-blue.png" alt="反馈问题">
                </div>
                <div class="postQa-form-title-notice">
                    <div class="postQa-form-title-notice0">
                        您有任何问题或建议，请告诉我们
                    </div>
                    <div class="postQa-form-title-notice1">
                        您的建议将会让我们做的更好！
                    </div>
                </div>
            </div>

            <div class="postQa-form-main">
                <div class="postQa-form-main-bt">
                    <div class="postQa-form-main-bt-name">
                        <span style="color: red;">*</span>
                        标题：
                    </div>
                    <div class="postQa-form-main-bt-input">
                        <vi-input
                            placeholder="请输入标题"
                            v-model="qaInfo.bt"
                            @change="inputChange($event, 'bt')"
                            @blur="inputBlur($event, 'bt')"
                        ></vi-input>
                    </div>
                </div>

                <div class="postQa-form-main-ms">
                    <div class="postQa-form-main-ms-name">
                        <span style="color: red;">*</span>
                        描述：
                    </div>
                    <div class="postQa-form-main-ms-input">
                        <vi-textarea
                            placeholder="请输入问题或建议描述"
                            v-model="qaInfo.ms"
                            @change="inputChange($event, 'ms')"
                            @blur="inputBlur($event, 'ms')"
                            :autosize="{ minRows: 6, maxRows: 6 }"
                        ></vi-textarea>
                    </div>
                </div>

                <div class="postQa-form-main-xx">
                    <div class="postQa-form-main-xx-fkr">
                        <div class="postQa-form-main-xx-fkr-name">
                            反馈人：
                        </div>
                        <div class="postQa-form-main-xx-fkr-input">
                            <vi-input
                                placeholder="请输入姓名"
                                v-model="qaInfo.fkr"
                                @change="inputChange($event, 'fkr')"
                                @blur="inputBlur($event, 'fkr')"
                            ></vi-input>
                        </div>
                    </div>

                    <div class="postQa-form-main-xx-dh">
                        <div class="postQa-form-main-xx-dh-name">
                            电话：
                        </div>
                        <div class="postQa-form-main-xx-dh-input">
                            <vi-input
                                placeholder="请输入电话"
                                v-model="qaInfo.dh"
                                @change="inputChange($event, 'dh')"
                                @blur="inputBlur($event, 'dh')"
                            ></vi-input>
                        </div>
                    </div>
                </div>

                <div class="postQa-form-main-dw">
                    <div class="postQa-form-main-dw-name">
                        单位：
                    </div>
                    <div class="postQa-form-main-dw-input">
                        <vi-input
                            placeholder="请输入单位名称"
                            v-model="qaInfo.dw"
                            @change="inputChange($event, 'dw')"
                            @blur="inputBlur($event, 'dw')"
                        ></vi-input>
                    </div>
                </div>

                <div class="postQa-form-main-em">
                    <div class="postQa-form-main-em-name">
                        Email：
                    </div>
                    <div class="postQa-form-main-em-input">
                        <vi-input
                            placeholder="请输入Email"
                            v-model="qaInfo.em"
                            @change="inputChange($event, 'em')"
                            @blur="inputBlur($event, 'em')"
                        ></vi-input>
                    </div>
                </div>

            </div>

            <div class="postQa-form-btn">
                <vi-button
                    type="primary"
                    @click="qainfoBtn"
                    :disabled="(postStatus || (this.qaInfo.bt.length===0) || (this.qaInfo.ms.length===0) )"
                >提交</vi-button>
            </div>

        </div>

        <div
            class="postQa-service"
            :style="{height: serviceDomHeight,}"
        >
            <div class="postQa-service-title">
                联系客服
            </div>

            <div class="postQa-service-info">
                <div
                    class="postQa-service-info-list"
                    v-for="(item, index) in serviceInfo"
                    :key="`postQa-service-info-${index}`"
                >
                    <div class="postQa-service-info-list-content">
                        <span style="color: #666;">姓名：</span><span style="color: #333;">{{item.name}}</span>
                    </div>
                    <div class="postQa-service-info-list-content">
                        <span style="color: #666;">电话：</span><span style="color: #333;">{{item.phone}}</span>
                    </div>
                    <div class="postQa-service-info-list-content">
                       <span style="color: #666;">邮箱：</span><span style="color: #333;">{{item.email}}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import activeShowMixin from "../../mixin/activeShow.mixin";

  export default {
    name: "postQa",
    mixins: [activeShowMixin],
    props: {
        qaBtnStatusChange: {
            type: Function,
            default: function () {
                return false;
            },
        },
    },
    data() {
        return{
            serviceInfo: [
                // {
                //     name: '张三',
                //     phone: '18895358888',
                //     email: '2563388888@iflytek.com'
                // },
            ], // 客服信息
            qaInfo: {
                bt: '',
                ms: '',
                fkr: '',
                dh: '',
                dw: '',
                em: '',
            },
            postStatus: false, // 当前是否正在提交
            serviceDomHeight: null,
        }
    },
    created(){

        // this.$http(this.$url.CustomerServiceInfo, )
        // .then(result => {
        //     if(result.state.ok === 1){
        //         this.serviceInfo = JSON.parse(result.body).serviceInfo;
        //     }
        //     else{
        //         this.serviceInfo = [];
        //     }
        // })
        // .catch(error => {
        // })
        // .finally(() => {
        // });
    },
    mounted() {
        this.serviceInfo = window.GLOBAL_CONFIG.serviceInfo;
    },
    methods: {
        // 输入
        inputChange(event, type, ){
            // console.log( 'inputChange', event, type, event.path[0].value );
            let value = event.path[0].value;
            let obj = this.qaInfo;
            if( type === 'bt' ){
                if( value.length > 100 ){
                    obj.bt = value.substring(0, 100);
                    this.$message.warning("标题最大支持100个字符！");
                }
                else{
                    obj.bt = value
                }
            }
            else if( type === 'ms' ){
                if( value.length > 500 ){
                    obj.ms = value.substring(0, 500);
                    this.$message.warning("描述最大支持500个字符！");
                }
                else{
                    obj.ms = value
                }
            }
            else if( type === 'fkr' ){
                if( value.length > 15 ){
                    obj.fkr = value.substring(0, 15);
                    this.$message.warning("反馈人姓名最大支持15个字符！");
                }
                else{
                    obj.fkr = value
                }
            }
            else if( type === 'dh' ){
                if( value.length > 30 ){
                    obj.dh = value.substring(0, 30);
                    this.$message.warning("电话最大支持30个字符！");
                }
                else{
                    obj.dh = value
                }
            }
            else if( type === 'dw' ){
                if( value.length > 30 ){
                    obj.dw = value.substring(0, 30);
                    this.$message.warning("单位最大支持30个字符！");
                }
                else{
                    obj.dw = value
                }
            }
            else if( type === 'em' ){
                if( value.length > 50 ){
                    obj.em = value.substring(0, 50);
                    this.$message.warning("Email最大支持50个字符！");
                }
                else{
                    obj.em = value
                }
            }
        },
        inputBlur(event, type, ){
            // console.log( 'inputBlur', event, type, );
            let value = event.path[0].value;
            let obj = this.qaInfo;
            // value = value.replace(/(^\s*)|(\s*$)/g, "").replace(/\s+/g, " ");
            if( type === 'bt' ){
                if( value.length > 100 ){
                    obj.bt = value.substring(0, 100);
                    this.$message.warning("标题最大支持100个字符！");
                }
                else if( value.length === 0 ){
                    obj.bt = value;
                    this.$message.warning("标题不能为空！");
                }
                else{
                    obj.bt = value;
                }
            }
            else if( type === 'ms' ){
                if( value.length > 500 ){
                    obj.ms = value.substring(0, 500);
                    this.$message.warning("描述最大支持500个字符！");
                }
                else if( value.length === 0 ){
                    obj.ms = value;
                    this.$message.warning("描述不能为空！");
                }
                else{
                    obj.ms = value;
                }
            }

        },
        // 问题信息提交
        qainfoBtn(){

            if( this.qaInfo.bt.length === 0 ){
                this.$message.warning("标题不能为空！");
                return
            }

            if( this.qaInfo.ms.length === 0 ){
                this.$message.warning("描述不能为空！");
                return
            }


            let obj = {
                "company": this.qaInfo.dw,
                "describe": this.qaInfo.ms,
                "email": this.qaInfo.em,
                "feedbackPerson": this.qaInfo.fkr,
                "tele": this.qaInfo.dh,
                "title": this.qaInfo.bt,
                "userId": this.userId,
            };
            this.$message.loading(`正在提交反馈...`);
            this.postStatus = true;
            this.$http(this.$url.submitFeedBack, obj )
            .then(result => {
                this.postStatus = false;
                // console.log(result);
                if(result.state.ok === 1){
                    this.$message.success("反馈提交成功！");
                    this.qaBtnStatusChange(0);
                    this.qaInfo = {
                        bt: '',
                        ms: '',
                        fkr: '',
                        dh: '',
                        dw: '',
                        em: '',
                    };
                }
                else{
                    this.$message.warning("反馈提交失败！");
                }
            })
            .catch(error => {
            })
            .finally(() => {
            });
        },
        // 滚动
        postQaScroll(event) {
            this.serviceDomHeight = `${event.path[0].scrollHeight}px`;
        },
    },
    computed: {
        userId() {
            return this.$store.state.user.userId;
        },
    }
  };
</script>

<style lang="less" scoped>
.postQa{
    width: 100%;
    height: 500px;
    overflow: auto;
    display: flex;
    .postQa-form{
        width: 60%;
        background-color: #fff;
        padding: 20px 0 20px 30px;

        .postQa-form-title{
            display: flex;
            height: 50px;
            .postQa-form-title-img{
                width: 50px;
                margin: 3px 5px 0 0;
            }
            .postQa-form-title-notice{
                height: 50px;
                line-height: 50px;
                .postQa-form-title-notice0{
                    font-size: 16px;
                    color: @primary;
                    font-weight: 600;
                    height: 30px;
                    line-height: 30px;
                }
                .postQa-form-title-notice1{
                    font-size: 12px;
                    color: #999;
                    height: 20px;
                    line-height: 20px;
                }
            }
        }

        .postQa-form-main{
            margin: 20px 0 0 0;
            .postQa-form-main-bt, .postQa-form-main-dw, .postQa-form-main-em{
                display: flex;
                height: 50px;
                line-height: 50px;
                .postQa-form-main-bt-name, .postQa-form-main-dw-name, .postQa-form-main-em-name{
                    width: 65px;
                    text-align: right;
                }
                .postQa-form-main-bt-input, .postQa-form-main-dw-input, .postQa-form-main-em-input{
                    width: calc( 100% - 65px );
                    padding: 0 20px 0 10px;
                }
            }

            .postQa-form-main-ms{
                display: flex;
                margin: 5px 0;
                .postQa-form-main-ms-name{
                    width: 65px;
                    text-align: right;
                }
                .postQa-form-main-ms-input{
                    width: calc( 100% - 65px );
                    padding: 0 20px 0 10px;
                }
            }

            .postQa-form-main-xx{
                display: flex;
                height: 50px;
                line-height: 50px;
                .postQa-form-main-xx-fkr{
                    height: 50px;
                    line-height: 50px;
                    width: 50%;
                    display: flex;
                    .postQa-form-main-xx-fkr-name{
                        width: 65px;
                        text-align: right;
                    }
                    .postQa-form-main-xx-fkr-input{
                        width: calc( 100% - 65px );
                        padding: 0 10px 0 10px;
                    }
                }

                .postQa-form-main-xx-dh{
                    height: 50px;
                    line-height: 50px;
                    width: 50%;
                    display: flex;
                    .postQa-form-main-xx-dh-name{
                        width: 55px;
                        text-align: right;
                    }
                    .postQa-form-main-xx-dh-input{
                        width: calc( 100% - 65px );
                        padding: 0 10px 0 10px;
                    }
                }
            }

        }

        .postQa-form-btn{
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

    }
    .postQa-service{
        width: 40%;
        background-color: #f0f3f5;
        padding: 20px 20px 20px 20px;
        .postQa-service-title{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }
        .postQa-service-info{
            .postQa-service-info-list{
                margin: 10px 0;
                .postQa-service-info-list-content{
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>
